<template>
  <div>
    <div class="order">
      <!-- <div @click="but()">
        <img src="../../assets/heishang.png" alt="" />
      </div> -->

      <span class="order-pay">订单支付</span>
    </div>
    <div class="head">
      <div class="pay">
        <div class="default">
          <span class="defa">默认</span>
          <span class="infor">{{xuan.username}}&nbsp;{{ xuan.phonenum }}</span>
        </div>
        <p class="infors">山西省太原市杏花岭杏花岭街道</p>
      </div>

      <div class="content">
        <div class="content-one">
          <img src="" alt="" />
          <span>{{xuan.shopname}}</span>
        </div>
        <div class="content-two">
          <div class="seller">
            <img :src="xuan.imagepath1" alt="" width="100" height="130" />
          </div>
          <div class="store">
            <p class="types">RNW去屑洗发水</p>
            <p class="specs">{{ xuan.colour }}&nbsp;{{xuan.size}}</p>
            <p class="return">7天无理由退货</p>
            <div class="price">
              <p class="money23"><img src="" alt="" /> {{ xuan.totalpirce }}</p>
              <div class="addsub">
                <span class="shop_num">{{ xuan.goodsnum }}件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="freight">
          <span class="fre">退货包运费</span>
          <span class="ght">卖家赠品</span>
        </div>
        <div class="subsidy">享首重免费取件或运费补贴7元</div>
      </div>
      <div class="money">
        <div class="ment">
          <div class="ments">
            <span>商品金额</span>
            <span>￥{{ xuan.totalpirce }}</span>
          </div>
          <div class="ment">
            <div class="ments">
              <span>运费</span>
              <span>￥0</span>
            </div>
            <p class="line"></p>
          </div>
          <div class="total">
            <span>总计:￥{{ xuan.totalpirce }}</span>
          </div>
        </div>
      </div>
      <div class="moneys">
        <div class="orders">
          <div class="ord">
            <span>支付方式</span>
            <span>余额支付</span>
          </div>
        </div>
        <div class="orders">
          <div class="ords">
            <span>订单备注</span>
            <span class="leave">和商家协商后一致留言</span>
          </div>
        </div>
      </div>
      <div class="bulletBoxs" v-if="box">
        <div class="bulletBox" id="box">
          <div class="bul">
            <img src="../../assets/cai.png" alt="" width="30" height="30" />
            <span>余额支付</span>
            <label for=""><input type="radio" name="click" id="" /></label>
          </div>
          <div class="bul">
            <img src="../../assets/wei(1).png" alt="" width="30" height="30" />
            <span>微信支付</span>
            <label for=""><input type="radio" name="click" id="" /></label>
          </div>
          <button class="buts" @click="showPopup1">确认</button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="overall">
        <span>总计：</span>
        <span class="over">￥{{ xuan.totalpirce }}</span>
      </div>
      <button class="but" @click="ton()">立即支付</button>
    </div>
    <van-popup v-model="show1" class="box1">
      <p>支付成功</p>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";

import { go_mover } from "../../api/mint";
import { Jiaorder } from "../../api/Orde";
import { Jiaorder_main } from "../../api/Orde";
import { Jiaorder_money } from "../../api/Orde";
export default {
  data() {
    return {
      box: false,
      Toast: "",
      show1: false,
      mover: [],
      orde: '',
      xuan:[]
    };
  },
  methods: {
    //购物车，生成订单
    shengding() {
      let a = this.$route.params.a;
      let b = this.$route.params.b;
      let c = this.$route.params.c;
      Jiaorder({
        uid: c,
        gid: a,
        cid: b
      }).then((res) => {
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(res);
        this.orde = res.result.ordernum
        // this.order_main()
      })
    },
    //生成订单后用订单id铲鲟订单详细内容
    order_main() {
      Jiaorder_main({
        ordernum:this.orde
      }).then((res) => {
        console.log(res);
        this.xuan=res.result
      }).catch((rest) => {
        console.log(rest);
      })
    },
    but() {
      console.log(123);
      // this.$router.push({
      //   path: "/Order",
      // })
    },
    ton() {
      this.box = true;
    },
    showPopup1() {
      console.log(123);
      this.show1 = true;
      Jiaorder_money({
        ordernum: this.orde,
        balance: 100,
        from: 17735420356,
        to:"蓝翔"
      }).then((res) => {
        console.log(res);
        this.$router.push("/Order")
      })
     
    },
    GO() {
      console.log(this.orde);
      go_mover({
        ordernum: this.orde
      }).then((res) => {
          console.log(123123);
            console.log(res);
        })
    }
  },
  mounted() {
    this.shengding()
    // this.GO()
  }
};
</script>

<style scoped>
.box1.van-popup.van-popup--center{
  width: 100px;
  margin-left: -80px;
  text-align: center;
  margin-top: -160px;
  border-radius: 10px;
}
.head {
  width: 360px;
  height: 670px;
  margin: 15px;
  /* background-color: rgb(239, 39, 39); */
}

.order {
  width: 100%;
  height: 60px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.order-pay {
  text-align: center;
  /* margin-left: 40px; */
}

.order img {
  width: 15px;
  height: 15px;
  margin: 0px 85px 0px 5px;
}

.order span {
  font-size: 17px;
  color: rgb(8, 8, 8);
}

.pay {
  width: 360;
  height: 80px;
  background-color: white;
  border-radius: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-evenly;
}

.defa {
  border: 1px solid rgb(177, 175, 175);
  border-radius: 3px;
  font-size: 10px;
  color: rgb(87, 85, 85);
}

.infor {
  font-size: 15.5px;
  color: rgb(62, 61, 61);
}

.infors {
  font-size: 16.5px;
  font-weight: 600;
  color: black;
  margin-left: 10px;
}

.default {
  margin-left: 10px;
}

.content {
  width: 360px;
  height: 200px;
  margin-bottom: 10px;
  background-color: white;
  border-radius: 15px;
}

.content-one {
  margin: 15px 0px 15px 10px;
}

.content-one img,
.content-one span {
  margin-top: 15px;
}

.content-two {
  display: flex;
  justify-content: space-evenly;
}

.store {
  margin-right: 10px;
}

.specs {
  margin: 5px 0px;
  color: rgb(199, 198, 198);
}

.ght {
  margin-right: 10px;
}

.return {
  width: 100px;
  margin: 5px 0px;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 6px;
  color: red;
  font-size: 14px;
  text-align: center;
}

.seller {
  width: 80px;
  height: 95px;
  line-height: 95px;
  text-align: center;
  border-radius: 10px;
  background-color: rgb(211, 211, 211);
}

.content-two {
  /* margin-right: 20px; */
  display: flex;
}

i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  background-color: rgb(239, 238, 238);
  /* border: 1px solid black; */
  border-radius: 50px;
}

.num {
  margin: 0px 5px;
}

.price {
  display: flex;
  justify-content: space-between;
}

.freight {
  margin: 5px 15px;
  display: flex;
  justify-content: space-between;
}

.subsidy {
  margin-top: 10px;
  margin-left: 130px;
  color: rgb(199, 198, 198);
}

.addsub {
  margin-left: 110px;
}

.money {
  margin-top: 50px;
  width: 360px;
  height: 150px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  align-items: center;
}

.ment {
  display: flex;
  flex-direction: column;
}

.ments {
  display: flex;
  justify-content: space-between;
}

.ments span {
  margin: 10px;
}

.line {
  width: 320px;
  height: 0px;
  border: 1px solid rgb(222, 222, 222);
  margin: 0 auto;
}

.total {
  height: 50px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}

.moneys {
  width: 360px;
  height: 100px;
  background-color: white;
  overflow: hidden;
  border-radius: 15px;
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  align-items: center;
}

.orders {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.ord span:nth-child(2) {
  margin-left: 200px;
}

.ord span:nth-child(2) {
  margin-left: 200px;
}

.ords span:nth-child(2) {
  margin-left: 100px;
}

.ord {
  display: flex;
  justify-content: space-between;
}

.leave {
  color: rgb(201, 199, 199) !important;
}

.over {
  color: red;
  font-size: 18px;
}

.bottom {
  width: 390px;
  height: 84px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.but {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: none;
  background-color: rgb(234, 56, 56);
  border-radius: 30px;
  color: white;
}

.bulletBox img {
  vertical-align: middle;
}

.bul {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bul span {
  margin-right: 80px;
}

.bul input {
  border: none;
}

.buts {
  width: 50px;
  height: 30px;
  margin: 25px 230px;
  border-radius: 5px;
  background-color: rgb(79, 78, 78);
  color: white;
  border: none;
}

.bulletBox {
  width: 300px;
  height: 150px;
  background-color: rgb(247, 247, 247);
  border-radius: 20px;
  position: absolute;
  top: 40%;
  left: 10%;
  /* display: none; */
}
.bulletBoxs {
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0, 0.3);
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.box1{
  margin: 0 auto;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>